<template>
  <el-dialog draggable :title="title" :model-value="visible" @closed="close">
    <el-card shadow="never" style="flex: 1" body-style="display:flex;height:100%;overflow:hidden">
      <div style="flex:1 ;overflow: auto">
          <el-table :data="tableData" border fit v-loading="showLoading">
            <el-table-column :prop="item.dataKey" :label="item.title" :width="item.width" resizable show-overflow-tooltip v-for="item in tableHeader" :key="item.dataKey"/>
          </el-table>
      </div>
    </el-card>
  </el-dialog>
</template>

<script setup>
import {useCompanyAllBillCategoryRef, useCompanyBillHistory} from "@/composition/billSys/useCompanyBill.js";
import {useGetCompanyUserListRef} from "@/composition/billSys/useAccount.js";
import dayjs from "dayjs";

const props = defineProps(['visible', 'title', 'billId', 'companyId']);
const emit = defineEmits(['update:visible', 'cancel']);
const {
  visible,
  title,
  billId,
  companyId
} = toRefs(props);

const showLoading = ref(true);
const companyUserList = useGetCompanyUserListRef(companyId.value);


// 定义table 表头
const tableHeader = [
  {
    dataKey: `billTime`,
    title: `订单时间`,
    width: 120
  },
  {
    dataKey: `category`,
    title: `类别`,
    width: 100
  },
  {
    dataKey: `amount`,
    title: `金额`,
    width: 120
  },
  {
    dataKey: `isDelete`,
    title: `是否删除`,
    width: 90
  },
  {
    dataKey: `isComplete`,
    title: `是否完成`,
    width: 90
  },
  {
    dataKey: `isOut`,
    title: `支出/收入`,
    width: 90
  },
  {
    dataKey: `creatorId`,
    title: `创建者`,
    width: 100
  },
  {
    dataKey: `remark`,
    title: `备注`,
  },
  {
    dataKey: `date`,
    title: `更新时间`,
    width: 120
  },
];
// 定义table 数据
const tableData = ref([]);

const formatTableData = (list) => {
  const companyAllCategory = useCompanyAllBillCategoryRef();
  return list.map(item => {
    return {
      ...item,
      date: dayjs(Number(item.createTime)).format('YYYY-MM-DD'),
      creatorId: companyUserList.value.find(it => it.userId === item.creatorId)?.username || item.creatorId,
      isDelete: item.isDelete ? '是' : '否',
      isComplete: item.isComplete ? '是' : '否',
      isOut: (companyAllCategory.value[item.category] && (companyAllCategory.value[item.category].isOut ? '支出': '收入')) || '已删除',
      category: (companyAllCategory.value[item.category] && companyAllCategory.value[item.category].name) || item.category,
      billTime: dayjs(Number(item.billTime)).format('YYYY-MM-DD'),
  };});
};

// 获取表单数据
const getTableData = async () => {
  showLoading.value = true;
  let billHistoryList = await useCompanyBillHistory(billId.value, companyId.value);
  tableData.value = formatTableData(billHistoryList);
  showLoading.value = false;
};

const close = () => {
  emit('update:visible', false);
  emit('cancel');
};

watch(() => billId.value, (newVal) => {
  if(Number(newVal) === -1) {
    return;
  }
  getTableData();
}, {immediate: true, deep: true});


</script>

<style scoped lang="scss">

</style>
